<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="hed">
          <div class="til">
            <Position class="address_map" />
            <h3>发现良宠</h3>
          </div>
          <div class="sousuo">
            <i class="el-icon-search"></i>
            <input type="text" placeholder="搜索同城商品" />
          </div>
        </div>
      </div>
    </div>

    <div class="shangjia">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="same">
          <h4 class="jia">附近商家</h4>

          <div
            v-show="business.length !== 0"
            class="box"
            v-for="item in business"
            :key="item.id"
          >
            <router-link :to="'/shopdetail/' + item.id">
              <!-- <img :src="item.url" alt="" class="img1" /> -->
              <img
                src="https://tse1-mm.cn.bing.net/th/id/R-C.cfe2e230cce4da81ae9f9ca29fe58f7b?rik=mlZU9FRC9oOjVw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190614%2f12%2f1560486839-SDgqaGAObk.jpeg&ehk=O12ta2gxX4%2bW8KfStCEM5srRicvHzGSfvRR0xtWk0MU%3d&risl=&pid=ImgRaw&r=0"
                alt=""
                class="img1"
              />
              <h3 class="dianming">{{ item.shop }}</h3>
              <!-- <ul v-for="ite in item.shops">
              <li >{{ite.shopName}}</li>
            </ul> -->
              <dl>
                <dt>配送费¥{{ item.meals }}元起</dt>
                <dd v-if="item.isBox">起送价¥{{ item.delivery }}</dd>
              </dl>
              <div class="bq">
                <div class="biao" v-for="biao in item.discount" :key="biao.id">
                  <a class="biaoqian">{{ biao }}</a>
                </div>
              </div>
              <div class="shangpin">
                <div class="pin" v-for="ite in item.shops" :key="ite.id">
                  <!-- <img :src="pin.img" alt="" class="img2" /> -->
                  <img
                    src="https://tse1-mm.cn.bing.net/th/id/R-C.cfe2e230cce4da81ae9f9ca29fe58f7b?rik=mlZU9FRC9oOjVw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190614%2f12%2f1560486839-SDgqaGAObk.jpeg&ehk=O12ta2gxX4%2bW8KfStCEM5srRicvHzGSfvRR0xtWk0MU%3d&risl=&pid=ImgRaw&r=0"
                    alt=""
                    class="img2"
                  />
                  <p class="pinzi">{{ ite.shopName }}</p>
                  <h5 class="qian">¥{{ ite.shopPrice }}</h5>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <van-empty
      v-show="business.length == 0"
      image="network"
      description="网络错误"
    />
  </div>
</template>
<script>
import { Toast } from "vant";

import Position from "../../components/Position.vue";
import { nearShop } from "@/api";
export default {
  components: {
    Position,
  },
  data() {
    return {
      business: [],
      isLoading: false,
    };
  },
  created() {
    this.nearShop();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.nearShop();
        this.isLoading = false;
      }, 1000);
    },
    nearShop() {
      nearShop().then((res) => {
        // console.log(res.data.data, "rrrrr");
        this.business = res.data.data;
      });
    },
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 19vh;
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  position: fixed;
  top: 0;
  z-index: 5;
}
.sousuo {
  width: 100%;
  height: 5vh;
  display: flex;
  align-items: center;
  position: relative;
}
a {
  color: #000;
}
input {
  width: 100%;
  height: 5vh;
  border-radius: 20px;
  text-indent: 2em;
  outline: none;
  border: 0;
}
input:hover {
  border: 1px solid orange;
}
i {
  position: absolute;
  left: 10px;
}
.til {
  width: 100%;
  /* height: 10vh; */
  display: flex;
  align-items: center;
}
.til .address_map {
  display: flex;
  align-items: center;
  width: 37%;
  /* height: 10vh; */

  /* margin-right: 10px; */
}
.til h3 {
  text-align: center;
  /* padding-top: 3.5vh; */
  color: rgb(255, 255, 255);
}
.shangjia {
  width: 100%;
  margin-bottom: 15vh;
  background: rgb(231, 231, 231);
  margin-top: 19vh;
}
.jia {
  padding-top: 1vh;
}
.img1 {
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  border: 1px rgb(194, 194, 194) solid;
  margin-top: 3vh;
  margin-left: 2vh;
  float: left;
}
.img2 {
  width: 10vh;
  height: 10vh;
  border: 1px rgb(194, 194, 194) solid;

  margin-left: 2vh;
  float: left;
}
.dianming {
  /* float: left; */
  padding-top: 1.5vh;
  margin-left: 15vh;
}
.box {
  width: 100%;
  height: 33vh;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  margin-top: 3vh;
  overflow-y: hidden;
}
dl {
  font-size: 10px;
}
dt {
  float: left;
  margin-left: 2.5vh;
  margin-top: 1vh;
}
dd {
  float: left;
  margin-left: 1.5vh;
  margin-top: 1vh;
}
.bq {
  float: left;
  margin-top: 1vh;
}
.biao {
  width: 9vh;
  height: 3vh;
  background: rgb(255, 255, 255);
  border: 1px rgb(255, 175, 26) solid;
  float: left;
  margin-left: 2vh;
}
.biaoqian {
  color: rgb(253, 84, 42);
  font-size: 12px;
  margin-left: 0.8vh;
}

.shangpin {
  /* background: gold; */
  height: 17vh;
  margin-top: 10vh;
  overflow-y: hidden;
  display: flex;
  margin-left: 15vh;
}
.pin {
  /* background: green; */

  text-overflow: ellipsis;
}
.pinzi {
  /* background: hotpink; */
  font-size: 13px;
  width: 9vh;
  margin-left: 2vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qian {
  font-size: 15px;
  color: rgb(255, 0, 0);
  margin-left: 2vh;
}
</style>
